<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类名修改样式属性</title>
    <style>
        .原盒子 {
            width: 200px; /* 宽高 背景色 */
            height: 200px;
            background-color: pink;
        }

        /* 下面2个类名 被JS调用 */
        .数字 {
            color: red; /* 文字颜色 */
        }

        .新盒子 {
            width: 300px; /* 宽高 背景色 */
            height: 300px;
            background-color: skyblue;

            margin: 100px auto; /* 版心居中 */

            padding: 40px; /* 内边距 */
            border: 1px solid #000; /* 边框线 */

            box-sizing: border-box; /*盒子尺寸: 內减模式,  防止 内外边距 设置可能撑大盒子*/

        }
    </style>
</head>
<body>
<h3> 操作类名(className) 操作CSS</h3>
<p>
    如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。 <br>
    语法： <br>
    元素.className = 'CSS类名'
</p>
<p>
    注意： <br>
    1. 由于class是关键字, 所以使用className去代替 <br>
    <span style="color:red;font-size: 20px;">
        2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
    </span>

</p>
<hr>

<!--演示-->

<div class="原盒子">盒子11111</div>

<div class="数字">123333333456</div>

<script>
    // 1. 获取元素
    const div_盒子 = document.querySelector('div')
    // 2.添加类名  元素.className = 'CSS类名'
    div_盒子.className = '新盒子' // 1.这里不用加.  2.注意 新类名覆盖掉了 原来的类名

    // 1. 获取元素
    const div_数字 = document.querySelector('.数字')
    // 2.添加类名  className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
    div_数字.className = '数字 新盒子'
</script>


</body>
</html>